<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>bind style</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style type="text/css" media="screen">
		.activited {
			color: red;
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- <div @click="handleClick" :class="[activited,activitedOne]">Hello Vue</div> -->
		<div :style="[styleObj,styleObjOne]" @click="handleClick">
			Hello Vue
		</div>
	</div>
	<script>
		var vue = new Vue({
			el: "#app",
			data: {
				// activited: "",
				// activitedOne: "activited-one"
				styleObj: {
					color: "black"
				},
				styleObjOne: {
					fontSize: "20px"
				}
			},
			methods: {
				// handleClick: function() {
				// 	this.activited = this.activited === "activited" ? "":"activited"
				// }
				handleClick: function() {
					this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"
				}

			}
		})
	</script>
</body>
</html>